﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <meta name="keywords" content="jQuery, Chart, Chart plugin, Data Visualization, Help Documentation" />
    <meta name="description" content="This page represents the help documentation of the jqxLinearGauge widget." />
    <title>jqxLinearGauge API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="Div1">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>width</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    100
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the gauge's width. This property accepts size in pixels and percentage.<br /><br />
                            Initializing jqxLinearGauge with the width property specified:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge({ width: 400 });
</code>
</pre>                        
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>height</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    300
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the gauge's height. This property accepts size in pixels and percentage.<br /><br />
                            Initializing jqxLinearGauge with the height property specified:</p>
<pre>
<code>   
    $('#gauge').jqxLinearGauge({ height: 400 });
</code>
</pre>                       
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>value</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    -50
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets gauge's value.<br /><br />
                            Initializing jqxLinearGauge with the value property specified:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge({ value: 15 });   
</code>
</pre>                        
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>min</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    -60
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets gauge's minimum value.<br /><br />
                            Initializing jqxLinearGauge with the min property specified:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge({ min: 10 });
</code>
</pre>
                    </div>
                </td>
            </tr>
            
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>max</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    40
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets jqxLinearGauge's max value.<br /><br />
                            Initializing jqxLinearGauge with the max property specified:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge({ max: 200 });
</code>
</pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>colorScheme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'scheme01'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the gauge's color pallete. jqxLinearGauge suppports 11 color schemes from 'scheme01'
                            to 'scheme11'.<br /><br />
                            Initializing jqxLinearGauge with the colorScheme property specified:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge({ colorScheme: 'scheme06' });
</code>
</pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxLinearGauge is disabled.<br /><br />
                            Initializing jqxLinearGauge with the disabled property specified:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge({ disabled: true });
</code>
</pre>
                    </div>
                </td>
            </tr>
            
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>animationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    1000
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets jqxLinearGauge's animation duration [ms].<br /><br />
                            Initializing jqxLinearGauge with the animationDuration property specified:</p>
<pre><code>
    $('#gauge').jqxLinearGauge({ animationDuration: 300 });
</code>
</pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>easing</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'linear'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets jqxLinearGauge's animation easing.<br /><br />
                            Possible easings are: 'linear', 'easeOutBack', 'easeInQuad', 'easeInOutCirc', 'easeInOutSine', 'easeOutCubic'.
                            Initializing jqxLinearGauge with the easing property specified:</p>
<pre><code>
    $('#gauge').jqxLinearGauge({ easing: 'easeOutCubic' });
</code>
</pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>showRanges</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This property indicates whether the gauge's ranges will be visible.
                            Initializing jqxLinearGauge with the showRanges property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ showRanges: false });     
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>rangesOffset</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets ranges offset from the ticks.
                            Initializing jqxLinearGauge with the rangesOffset property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ rangesOffset: 5 });     
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>rangeSize</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    '5%'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the size of the ranges. This property can be set in percentage or in pixels.
                            Initializing jqxLinearGauge with the rangeSize property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ rangeSize: '10%' });     
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>ticksOffset</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    ['36%', '5%']
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the offset of the ticks. The first element of the array is the left offset and the second one is the top offset.
                            This property can be set in pixels or percentage.
                            Initializing jqxLinearGauge with the ticksOffset property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ ticksOffset: [0, 3] });     
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>scaleStyle</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { stroke: '#A1A1A1', 'stroke-width': 1 }
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the style of the line connecting all the ticks.
                            Initializing jqxLinearGauge with the scaleStyle property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ scaleStyle: { stroke: '#000000', 'stroke-width': 3 } });     
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>scaleLength</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    '90%'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the length of the scale. This property could be set in percentage or in pixels.
                            Initializing jqxLinearGauge with the scaleLength property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ scaleLength: '100px' });
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>orientation</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'vertical'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets jqxLineaerGauge's orientation. Possible values for this property are: 'vertical', 'horizontal'.
                            Initializing jqxLinearGauge with the orientation property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ orientation: 'horizontal' });
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>ticksPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'both'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets jqxLineaerGauge's ticks position. 
                            If this property has value 'near' ticks will be visible only in the left side of the scale.
                            If it's value is 'far' ticks will be visible only in the right side of the scale.
                            If it's value is 'both' ticks will be visible in both sides.
                            Initializing jqxLinearGauge with the ticksPosition property specified:</p>
<pre><code>
       $('#gauge').jqxLinearGauge({ ticksPosition: 'far' });
</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>ranges</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This property is array from objects. Each object is different range. The range is colored area with specified size.
                            Here is a sample initialization of the jqxLinearGauge with the ranges array:
                        </p>
<pre><code>
var ranges = [{
    startValue: 0,
    endValue: 35,
    style: {
        fill: '#dddddd',
        stroke: '#dddddd'
    }
},
{
    startValue: 35,
    endValue: 55,
    style: {
        fill: '#dddddd',
        stroke: '#dddddd'
    }
}];
$('#gauge').jqxLinearGauge({ ranges: ranges });
</code></pre>
                        <ul>
                            <li>startValue - the value from which the range will start</li>
                            <li>endValue - the value where the current range will end</li>
                            <li>style - this property is object containing style information for the range. It accepts properties like 'fill', 'stroke', etc (typical for SVG/VML). </li>
                        </ul>
                    </div>
                </td>
            </tr>


            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>ticksMinor</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { size: '10%', interval: 5, style: { stroke: '#A1A1A1', 'stroke-width': 1 }, visible: true }
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the gauge's properties for it's minor ticks.<br />
                            Here is a sample initialization of the jqxLinearGauge with ticksMinor property specified:
                        </p>
<pre><code>
$('#gauge').jqxLinearGauge({ ticksMinor: { size: '5%', interval: 15, style: { stroke: '#898989'}, visible: true }});
</code></pre>
        <ul>
            <li>size - specifies the length of the tick. This property can be set in pixels or in percentage.</li>
            <li>interval - specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a minor tick.</li>
            <li>visible - indicates if the minor ticks will be visible.</li>
            <li>style - sets ticks style (color and thickness)</li>
        </ul>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>ticksMajor</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { size: '10%', interval: 5, style: { stroke: '#A1A1A1', 'stroke-width': 1 }, visible: true }
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the gauge's properties for it's major ticks.<br />
                            Here is a sample initialization of the jqxLinearGauge with ticksMajor property specified:
                        </p>
<pre><code>
$('#gauge').jqxLinearGauge({ ticksMajor: { size: '10px', interval: 15, style: { stroke: '#898989'}, visible: true }});
</code></pre>
        <ul>
            <li>size - specifies the length of the tick. This property is measured in pixels or percentage.</li>
            <li>interval - specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a major tick.</li>
            <li>visible - indicates if the major ticks will be visible.</li>
            <li>style - sets ticks style (color and thickness)</li>
        </ul>
                    </div>
                </td>
            </tr>


            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>background</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { borderRadius: 15, style: { stroke: '#cccccc', fill: 'default-gradient'}, visible: true, backgroundType: 'roundedRectangle', showGradient: true }
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the gauge's properties for it's background.<br />
                            Here is a sample initialization of the jqxLinearGauge with the background property specified:
                        </p>
<pre><code>
$('#gauge').jqxLinearGauge({ background: { style: { stroke: '#cccccc', fill: '#cccccc'}, visible: true, backgroundType: 'rectangle' }});
</code></pre>
        <ul>
            <li>borderType - specifies the border type. Possible values are 'rectangle' and 'roundedRectangle'.</li>
            <li>borderRadius - sets the border radius</li>
            <li>visible - indicates if the border will be visible.</li>
            <li>style - sets border style (color and thickness)</li>
            <li>showGradient - whether a gradient background will be used</li>
        </ul>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>pointer</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, size: '7%', visible: true, offset: 0 }
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the gauge's properties for it's pointer.<br />
                            Here is a sample initialization of the jqxLinearGauge with the pointer property specified:
                        </p>
<pre><code>
$('#gauge').jqxLinearGauge({ pointer: { pointerType: 'arrow', size: '3%', visible: true, offset: 10 }});
</code></pre>
        <ul>
            <li>pointerType - specifies the pointer type. Possible values for this property are  - 'default' and 'rectangle'. If it's value is 'default' the pointer will be column otherwise it'll be an arrow.</li>
            <li>style - specifies the gauge's pointer style. Here you can set it's fill or stroke color.</li>
            <li>size - specifies pointer's size. This property can be set in percents ('0%' - '100%') or in pixels.</li>
            <li>visible - indicates whether the pointer will be visible.</li>
            <li>offset - indicates the left offset of the pointer.</li>
        </ul>
                    </div>
                </td>
            </tr>


            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>labels</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    { position: 'both', interval: 20, offset: 0, visible: true, formatValue: function (value, position) {
                        return value;
                    }}
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets the gauge's properties for it's labels.<br />
                            Here is a sample initialization of the jqxLinearGauge with the labels property specified:
                        </p>
<pre><code>
$('#gauge').jqxLinearGauge({ labels: { position: 'far', interval: 20, offset: 3, visible: true }});
</code></pre>
        <ul>
            <li>position - specifies the gauge's labels position. Possible values for this property are 'far', 'near' and 'both'. If 'near' is used labels will be visible only in the left hand side of the ticks. If the 'far' value is set ticks will be visible only in the right hand side of the ticks. Otherwise, if the 'both' value is used the labels will be shown in both sides of the ticks.</li>
            <li>style - specifies the gauge's pointer style. Here you can set it's fill or stroke color.</li>
            <li>interval - specifies labels's frequency.</li>
            <li>offset - specifies labels's offset from the ticks.</li>
            <li>formatValue - callback used for formatting the label. This function accepts two parameters. The first one is the label's value and the second one is the label's position.</li>
            <li>visible - indicates whether the labels will be visible.</li>
        </ul>
                    </div>
                </td>
            </tr>

        </table>
        <br />
    </div>        
    <div id="events">
        <h2 class="documentation-top-header">
            Events</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Arguments
                </th>
                <th>
                </th>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>valueChanging</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            The event is raised when the gauge's value is changing.<br /><br />
                            Example:</p>
<pre>
<code>
    $('#gauge').bind('valueChanging', function (e) {
        alert('Value changed: ' + e.args.value);
    });
    $('#gauge').jqxLinearGauge('value', 220);
</code>
</pre>
                        
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>valueChanged</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            The event is raised when the gauge's value is changed.<br /><br />
                            Example:</p>
<pre>
<code>
    $('#gauge').bind('valueChanged', function (e) {
        alert('Value changed: ' + e.args.value);
    });
    $('#gauge').jqxLinearGauge('value', 220);
</code>
</pre>
                    </div>
                </td>
            </tr>
      </table>
    </div>
     <div id="methods">
        <h2 class="documentation-top-header">
            Methods</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Arguments
                </th>
                <th>
                    Return Value
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>disable</span>
                </td>
                <td>
                    <span>None</span>
                </td>
                <td>
                    None
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method disables the gauge.<br /><br />
                            Example:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge('disable');
</code>
</pre>                        
                    </div>
                </td>
            </tr>


            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>enable</span>
                </td>
                <td>
                    <span>None</span>
                </td>
                <td>
                    None
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This method enables the gauge.<br /><br />
                            Example:</p>
<pre>
<code>
    $('#gauge').jqxLinearGauge('enable');
</code>
</pre>                        
                    </div>
                </td>
            </tr>

        </table>
        <br />
    </div>
                 
</body>
</html>